<style lang="scss" scoped>
  .chart-lines, .chart {
    height: 100%;
  }
</style>
<template>
  <div class="chart-lines">
    <chart-container :title="title" :isLoading="loading" :isEmpty="isDataEmpty" :isAutoHeight="isAutoHeight">
      <div class="chart" ref="chart"></div>
    </chart-container>
  </div>
</template>
<script>
  // import echarts from 'echarts/lib/echarts'
  // import 'echarts/lib/chart/line'
  // import 'echarts/lib/component/tooltip'
  // import 'echarts/lib/component/title'
  // import 'echarts/lib/component/legend'
  import util from '_util'
  import chartMixin from './helpers/chart-mixin'
  import chartContainer from './helpers/chart-container'

  export default {
    name: 'chart-lines',
    mixins: [chartMixin],
    components: {chartContainer},
    mounted () {
      this.chart = echarts.init(this.$refs.chart)
      // this.renderChart()
    },
    data () {
      return {
        chart: null,
        localOptions: {
          tooltip: {
            trigger: 'item',
            transitionDuration: 0,
            axisPointer: {
              type: 'cross'
            },
            // left: 'right',
            formatter: function (params) {
              let res = ''
              let data = params.data
              res += window.$$apm.locale['value'] + ': ' + util.toDecimal(data[1]) + '<br>'
              res += window.$$apm.locale['startTime'] + ': ' + data[2] + '<br>'
              res += window.$$apm.locale['endTime'] + ': ' + data[3] + '<br>'
              if (data[4]) {
                for (let key in data[4]) {
					  res += (window.$$apm.locale[key] ? window.$$apm.locale[key] : key) + ': ' + data[4][key] + '<br>'
				  }
              }
              return res
            }
          },
          xAxis: [
            {
              type: 'time',
              boundaryGap: false
              // splitNumber: 20
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: ''
            }
          ]
        }
      }
    },
    props: {
      title: {
        reqiured: true
      },
      data: {
        type: Object,
        required: true
      },
      loading: false,
      options: Object,
      isAutoHeight: false
    },
    computed: {
      isDataEmpty () {
        return !(this.data &&
        this.data.data &&
        this.data.data.length &&
        this.data.data[0].list &&
        this.data.data[0].list.length)
      }
    },
    watch: {
      title (v) {
        this.renderChart()
      },
      data: {
        deep: true,
        handler (v) {
          this.renderChart()
        }
      },
      loading (v) {
        if (v) this.chart.showLoading({color: '#cccccc', text: ' '})
        else this.chart.hideLoading()
      }
    },
    methods: {
      renderChart () {
        this.chart.resize()
        if (!this.isDataEmpty) {
          let data = this.data.data
          let allLength = 0
          let limit = 120
          data.forEach(e => {
            allLength += e.name.length
            e.name = e.name.replace(/[\n\r]/g, ' ').replace(/\s+/g, ' ')
          })
          let option = Object.assign({}, this.localOptions, {
            // title: {
            //   text: this.title
            // },
            series: data.map((e, i) => {
              return {
                type: 'line',
                name: e.name,
                areaStyle: {normal: {}},
                data: e.list.map(item => {
                  return [
                    item.x,
                    item.y,
                    item.startTime,
                    item.endTime,
                    item.info
                  ]
                })
              }
            })
          });
          if (!(data.length === 1 && data[0].name === 'None')) {
            option.legend = {
              data: data.map((e, i) => {
                return e.name
              }),
              formatter: allLength > 60 ? function (name) {
                return echarts.format.truncateText(name, 80, '14px Microsoft Yahei', '…');
              } : null,
              tooltip: {
                show: allLength > 60
              }
            }
          }
          option.yAxis[0].name = this.data.unit || ''
          this.chart.setOption(Object.assign({
            color: this.chartColors
          }, option, this.options))
        }
      }
    }
  }
</script>
